<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style type="text/css">
		    body{
				margin: 0;
			}
			.eat-peas{
				width: 600px;
				height: 200px;
				margin: 100px auto 0px;
				position: relative;
			}
			.eat-peas .head{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				z-index: 2;
			}
			
			.eat-peas .peas{
				width: 40px;
				height: 40px;
				background-color: tomato;
				border-radius: 50%;
				position: absolute;
				left: 120px;
				top: 50%;
				margin-top: -20px;
				animation: peas .8s ease infinite;
				box-shadow: 70px 0px 0px tomato,140px 0px 0px tomato,210px 0px 0px tomato,280px 0px 0px tomato,350px 0px 0px tomato;
			}
			
			.head .eye{
				width: 20px;
				height: 20px;
				background-color: #000;
				border: 2px solid #fff;
				position: absolute;
				top: 20px;
				left: 85px;
				border-radius: 50%;
			}
			
			.eat-peas .head::before{
				content: "";
				display: block;
				width: 200px;
				height: 100px;
				background-color: tomato;
				transform-origin: bottom center; 
				/* 设置旋转基点 */
				transform: rotate(0deg);
				animation: rotate1 .4s ease infinite alternate;
			}
			
			.eat-peas .head::after{
				content: "";
				display: block;
				width: 200px;
				height: 100px;
				background-color: tomato;
				transform-origin: top center;
				/* 设置旋转基点 */
				transform: rotate(0deg);
				animation: rotate2 .4s ease infinite alternate;
			}
			
			@keyframes rotate1{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(-30deg);
				}
			}
			
			@keyframes rotate2{
				0%{
					transform: rotate(0deg);
				}
				100%{
					transform: rotate(30deg);
				}
			}
			
			@keyframes peas{
				0%{
					transform: translateX(0px);
				}
				100%{
					transform: translateX(-70px);
				}
			}
		</style>
	</head>
	<body>
		<div class="eat-peas">
			<div class="head">
				<div class="eye"></div>
			</div>
			<div class="peas"></div>
		</div>
	</body>
</html>
